<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

	<title>Editor example - Custom field type plug-ins</title>
	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../../../TableTools/css/dataTables.tableTools.css">
	<link rel="stylesheet" type="text/css" href="../../css/dataTables.editor.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
	<style type="text/css" class="init">

	button.inputButton {
		float: left;
		text-align: center;
		display: block;
		cursor: pointer;
		margin: 0 20px 10px 0;
		padding: 6px 0;
		background: #F8F8F8;
		background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
		background: -moz-linear-gradient(top, white, #CCC);
		background: linear-gradient(top, white, #CCC);
		text-shadow: 0 1px 0 white;
		border: 1px solid #999;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		box-shadow: 0px 0px 2px #999;
		-moz-box-shadow: 0px 0px 2px #999;
		-webkit-box-shadow: 0px 0px 2px #999;
		width: 80px;
	}

	button.inputButton.selected {
		font-weight: normal;
		background: #02475A;
		background: -webkit-gradient(linear, center bottom, center top, from(#777), to(#333));
		background: -moz-linear-gradient(top, #333, #777);
		background: linear-gradient(top, #333, #777);
		box-shadow: inset 0px 0px 2px #222;
		-moz-box-shadow: inset 0px 0px 2px #222;
		-webkit-box-shadow: inset 0px 0px 2px #222;
		color: white;
		text-shadow: none;
	}

	</style>
	<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.js"></script>
	<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js"></script>
	<script type="text/javascript" language="javascript" src="../../../TableTools/js/dataTables.tableTools.js"></script>
	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.js"></script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js"></script>
	<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
	<script type="text/javascript" language="javascript" class="init">



var editor; // use a global for the submit and return data rendering in the examples

// Our custom field type
$.fn.dataTable.Editor.fieldTypes.todo = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
	"create": function ( conf ) {
		var that = this;

		conf._enabled = true;

		// Create the elements to use for the input
		conf._input = $( 
			'<div>'+
				'<button class="inputButton" value="0">To do</button>'+
				'<button class="inputButton" value="1">Done</button>'+
			'</div>')[0];

		// Use the fact that we are called in the Editor instance's scope to call
		// the API method for setting the value when needed
		$('button.inputButton', conf._input).click( function () {
			if ( conf._enabled ) {
				that.set( conf.name, $(this).attr('value') );
			}

			return false;
		} );

		return conf._input;
	},

	"get": function ( conf ) {
		return $('button.selected', conf._input).attr('value');
	},

	"set": function ( conf, val ) {
		$('button.selected', conf._input).removeClass( 'selected' );
		$('button.inputButton[value='+val+']', conf._input).addClass('selected');
	},

	"enable": function ( conf ) {
		conf._enabled = true;
		$(conf._input).removeClass( 'disabled' );
	},

	"disable": function ( conf ) {
		conf._enabled = false;
		$(conf._input).addClass( 'disabled' );
	}
} );


$(document).ready(function() {
	editor = new $.fn.dataTable.Editor( {
		ajax: "../php/todo.php",
		table: "#example",
		fields: [ {
				label: "Item:",
				name: "item"
			}, {
				label: "Status:",
				name: "done",
				type: "todo", // Using the custom field type
				def: 0
			}, {
				label: "Priority:",
				name: "priority",
				type: "select",
				ipOpts: [
					{ label: "1 (highest)", value: "1" },
					{ label: "2",           value: "2" },
					{ label: "3",           value: "3" },
					{ label: "4",           value: "4" },
					{ label: "5 (lowest)",  value: "5" }
				]
			}
		]
	} );

	$('#example').DataTable( {
		dom: "Tfrtip",
		ajax: "../php/todo.php",
		columns: [
			{ data: "priority", className: "center" },
			{ data: "item" },
			{ 
				className: "center",
				data: "done",
				render: function (data, type, row) {
					if ( type === 'display' || type === 'filter' ) {
						// Filtering and display get the rendered string
						return data == 0 ? "To do" : "Done";
					}
					// Otherwise just give the original data
					return data;
				}
			}
		],
		tableTools: {
			sRowSelect: "os",
			aButtons: [
				{ sExtends: "editor_create", editor: editor },
				{ sExtends: "editor_edit",   editor: editor },
				{ sExtends: "editor_remove", editor: editor }
			]
		}
	} );
} );



	</script>
</head>

<body class="dt-example">
	<div class="container">
		<section>
			<h1>Editor example <span>Custom field type plug-ins</span></h1>

			<div class="info">
				<p>Although Editor comes with a number of field types <a href=
				"//editor.datatables.net/reference/field">built in</a>, you might find that the built in controls don't
				do exactly what you would like, or you want to present a completely custom control. For these
				eventualities Editor's field types are designed to be completely extensible and you can create plug-ins
				to provide your custom controls, or use some of the ones already available.</p>

				<p>This example shows how you might create a binary switch using <code class="tag" title=
				"HTML tag">button</code> elements, effectively implementing a custom radio control. This might be
				useful for styling, as shown in this example.</p>

				<p>For more detailed information on how to create plug-ins for Editor, please refer to the <a href=
				"//editor.datatables.net/manual/development">Editor documentation</a>.</p>
			</div>

			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Priority</th>
						<th>Item</th>
						<th>Status</th>
					</tr>
				</thead>
			</table>

			<ul class="tabs">
				<li class="active">Javascript</li>
				<li>HTML</li>
				<li>CSS</li>
				<li>Ajax</li>
				<li>Server-side script</li>
			</ul>

			<div class="tabs">
				<div class="js">
					<p>The Javascript shown below is used to initialise the table shown in this
					example:</p><code class="multiline brush: js;">var editor; // use a global for the submit and return data rendering in the examples

// Our custom field type
$.fn.dataTable.Editor.fieldTypes.todo = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
	&quot;create&quot;: function ( conf ) {
		var that = this;

		conf._enabled = true;

		// Create the elements to use for the input
		conf._input = $( 
			'&lt;div&gt;'+
				'&lt;button class=&quot;inputButton&quot; value=&quot;0&quot;&gt;To do&lt;/button&gt;'+
				'&lt;button class=&quot;inputButton&quot; value=&quot;1&quot;&gt;Done&lt;/button&gt;'+
			'&lt;/div&gt;')[0];

		// Use the fact that we are called in the Editor instance's scope to call
		// the API method for setting the value when needed
		$('button.inputButton', conf._input).click( function () {
			if ( conf._enabled ) {
				that.set( conf.name, $(this).attr('value') );
			}

			return false;
		} );

		return conf._input;
	},

	&quot;get&quot;: function ( conf ) {
		return $('button.selected', conf._input).attr('value');
	},

	&quot;set&quot;: function ( conf, val ) {
		$('button.selected', conf._input).removeClass( 'selected' );
		$('button.inputButton[value='+val+']', conf._input).addClass('selected');
	},

	&quot;enable&quot;: function ( conf ) {
		conf._enabled = true;
		$(conf._input).removeClass( 'disabled' );
	},

	&quot;disable&quot;: function ( conf ) {
		conf._enabled = false;
		$(conf._input).addClass( 'disabled' );
	}
} );


$(document).ready(function() {
	editor = new $.fn.dataTable.Editor( {
		ajax: &quot;../php/todo.php&quot;,
		table: &quot;#example&quot;,
		fields: [ {
				label: &quot;Item:&quot;,
				name: &quot;item&quot;
			}, {
				label: &quot;Status:&quot;,
				name: &quot;done&quot;,
				type: &quot;todo&quot;, // Using the custom field type
				def: 0
			}, {
				label: &quot;Priority:&quot;,
				name: &quot;priority&quot;,
				type: &quot;select&quot;,
				ipOpts: [
					{ label: &quot;1 (highest)&quot;, value: &quot;1&quot; },
					{ label: &quot;2&quot;,           value: &quot;2&quot; },
					{ label: &quot;3&quot;,           value: &quot;3&quot; },
					{ label: &quot;4&quot;,           value: &quot;4&quot; },
					{ label: &quot;5 (lowest)&quot;,  value: &quot;5&quot; }
				]
			}
		]
	} );

	$('#example').DataTable( {
		dom: &quot;Tfrtip&quot;,
		ajax: &quot;../php/todo.php&quot;,
		columns: [
			{ data: &quot;priority&quot;, className: &quot;center&quot; },
			{ data: &quot;item&quot; },
			{ 
				className: &quot;center&quot;,
				data: &quot;done&quot;,
				render: function (data, type, row) {
					if ( type === 'display' || type === 'filter' ) {
						// Filtering and display get the rendered string
						return data == 0 ? &quot;To do&quot; : &quot;Done&quot;;
					}
					// Otherwise just give the original data
					return data;
				}
			}
		],
		tableTools: {
			sRowSelect: &quot;os&quot;,
			aButtons: [
				{ sExtends: &quot;editor_create&quot;, editor: editor },
				{ sExtends: &quot;editor_edit&quot;,   editor: editor },
				{ sExtends: &quot;editor_remove&quot;, editor: editor }
			]
		}
	} );
} );</code>

					<p>In addition to the above code, the following Javascript library files are loaded for use in this
					example:</p>

					<ul>
						<li><a href="../../../../media/js/jquery.js">../../../../media/js/jquery.js</a></li>
						<li><a href=
						"../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a></li>
						<li><a href=
						"../../../TableTools/js/dataTables.tableTools.js">../../../TableTools/js/dataTables.tableTools.js</a></li>
						<li><a href="../../js/dataTables.editor.js">../../js/dataTables.editor.js</a></li>
					</ul>
				</div>

				<div class="table">
					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
					DataTables:</p>
				</div>

				<div class="css">
					<div>
						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
						files (below), in order to correctly display the table. The additional CSS used is shown
						below:</p><code class="multiline brush: js;">button.inputButton {
		float: left;
		text-align: center;
		display: block;
		cursor: pointer;
		margin: 0 20px 10px 0;
		padding: 6px 0;
		background: #F8F8F8;
		background: -webkit-gradient(linear, center bottom, center top, from(#CCC), to(white));
		background: -moz-linear-gradient(top, white, #CCC);
		background: linear-gradient(top, white, #CCC);
		text-shadow: 0 1px 0 white;
		border: 1px solid #999;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		box-shadow: 0px 0px 2px #999;
		-moz-box-shadow: 0px 0px 2px #999;
		-webkit-box-shadow: 0px 0px 2px #999;
		width: 80px;
	}

	button.inputButton.selected {
		font-weight: normal;
		background: #02475A;
		background: -webkit-gradient(linear, center bottom, center top, from(#777), to(#333));
		background: -moz-linear-gradient(top, #333, #777);
		background: linear-gradient(top, #333, #777);
		box-shadow: inset 0px 0px 2px #222;
		-moz-box-shadow: inset 0px 0px 2px #222;
		-webkit-box-shadow: inset 0px 0px 2px #222;
		color: white;
		text-shadow: none;
	}</code>
					</div>

					<p>The following CSS library files are loaded for use in this example to provide the styling of the
					table:</p>

					<ul>
						<li><a href=
						"../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a></li>
						<li><a href=
						"../../../TableTools/css/dataTables.tableTools.css">../../../TableTools/css/dataTables.tableTools.css</a></li>
						<li><a href="../../css/dataTables.editor.css">../../css/dataTables.editor.css</a></li>
					</ul>
				</div>

				<div class="ajax">
					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
					will update automatically as any additional data is loaded.</p>
				</div>

				<div class="php">
					<p>The script used to perform the server-side processing for this table is shown below. Please note
					that this is just an example script using PHP. Server-side processing scripts can be written in any
					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
					DataTables documentation</a>.</p>
				</div>
			</div>
		</section>
	</div>

	<section>
		<div class="footer">
			<div class="gradient"></div>

			<div class="liner">
				<h2>Other examples</h2>

				<div class="toc">
					<div class="toc-group">
						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
						<ul class="toc">
							<li><a href="../simple/simple.html">Basic initialisation</a></li>
							<li><a href="../simple/fieldDefaults.html">Setting defaults</a></li>
							<li><a href="../simple/fieldTypes.html">Field types</a></li>
							<li><a href="../simple/dates.html">Dates (with jQuery UI datepicker)</a></li>
							<li><a href="../simple/i18n.html">Internationalisation</a></li>
							<li><a href="../simple/inTableControls.html">In table form controls</a></li>
							<li><a href="../simple/responsive.html">Responsive table extension</a></li>
							<li><a href="../simple/server-side-processing.html">Server-side processing</a></li>
							<li><a href="../simple/join.html">Join tables - working with multiple SQL tables</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../advanced/index.html">Advanced initialisation</a></h3>
						<ul class="toc">
							<li><a href="../advanced/formOnlyData.html">Data shown only in the form</a></li>
							<li><a href="../advanced/tableOnlyData.html">Data shown in table only</a></li>
							<li><a href="../advanced/deepObjects.html">Complex (nested) JSON data source</a></li>
							<li><a href="../advanced/REST.html">REST interface</a></li>
							<li><a href="../advanced/localstorage.html">Ajax override - using localStorage for the data
							source</a></li>
							<li><a href="../advanced/jsonId.html">Row ID source specification</a></li>
							<li><a href="../advanced/htmlTable.html">DOM sourced table</a></li>
							<li><a href="../advanced/exportButtons.html">Export buttons</a></li>
							<li><a href="../advanced/joinSelf.html">Join tables - self referencing join</a></li>
							<li><a href="../advanced/joinLinkTable.html">Join tables - link table</a></li>
							<li><a href="../advanced/joinArray.html">Join tables - one-to-many join</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
						<ul class="toc">
							<li><a href="../bubble-editing/simple.html">Simple bubble editing</a></li>
							<li><a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a></li>
							<li><a href="../bubble-editing/options.html">Form control and display options</a></li>
							<li><a href="../bubble-editing/defaultOptions.html">Default control and display
							options</a></li>
							<li><a href="../bubble-editing/inTableControls.html">Bubble editing with in table row
							controls</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
						<ul class="toc">
							<li><a href="../inline-editing/simple.html">Simple inline editing</a></li>
							<li><a href="../inline-editing/tabControl.html">Tab between columns</a></li>
							<li><a href="../inline-editing/options.html">Editing options - submit on blur</a></li>
							<li><a href="../inline-editing/submitButton.html">Inline editing with a submit
							button</a></li>
							<li><a href="../inline-editing/editIcon.html">Edit icon</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../api/index.html">API</a></h3>
						<ul class="toc">
							<li><a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a></li>
							<li><a href="../api/clientValidation.html">Client-side validation</a></li>
							<li><a href="../api/triggerButton.html">Customised control buttons</a></li>
							<li><a href="../api/backNext.html">Previous / next editing buttons</a></li>
							<li><a href="../api/duplicateButton.html">Duplicate button</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../standalone/index.html">Standalone</a></h3>
						<ul class="toc">
							<li><a href="../standalone/simple.html">Simple standalone editing</a></li>
							<li><a href="../standalone/bubble.html">Bubble editing</a></li>
							<li><a href="../standalone/inline.html">Inline editing</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="../styling/index.html">Styling</a></h3>
						<ul class="toc">
							<li><a href="../styling/envelope.html">Envelope display controller</a></li>
							<li><a href="../styling/envelopeInTable.html">Envelope display with in table
							controls</a></li>
							<li><a href="../styling/stackedInputs.html">Styled for stacked inputs</a></li>
							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
							<li><a href="../styling/jqueryui.html">jQuery UI</a></li>
						</ul>
					</div>

					<div class="toc-group">
						<h3><a href="./index.html">Plug-ins</a></h3>
						<ul class="toc active">
							<li class="active"><a href="./fieldPlugin.html">Custom field type plug-ins</a></li>
							<li><a href="./displayController.html">Custom display controller</a></li>
						</ul>
					</div>
				</div>

				<div class="epilogue">
					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
					information about its API properties and methods.<br>
					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
					DataTables.</p>

					<p class="copyright">DataTables designed and created by <a href=
					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
				</div>
			</div>
		</div>
	</section>
</body>
</html>